<template>
	<view class="content1">
		<!-- 展示输入框尾部图标 -->
		<!-- 搜索框 -->
		<view class="head">
			<!-- <uni-easyinput prefixIcon="search" class="search22" v-model="value" placeholder="请输入内容" @iconClick="onClick">
			</uni-easyinput> -->
			<image src="@/static/fandian/sousuo.png" class="imgsearch"></image>
			<input type="text"  placeholder="输入搜索的内容"   class="headSearch" @confirm="search"/>
			<!-- <input type="text" v-model="keywords" @input="search" placeholder="请输入关键字搜索" /> -->
			
		</view>
		<!-- 左侧列表框 -->
		<view class="content">
			<view class="left" :style="aheight">
				<uni-list class="left-list" v-for="(item, index) in city" :key='index' :border="false">
					<uni-list-item v-if="item.name === selectIndex" class="left-list-item-selected" :clickable="true" :transparent="true" @click="chose(index)">
						<view slot="body" class="left-list-item">
							<text class="left-list-item-text">{{ item.name }}</text>
						</view>
					</uni-list-item>
					<uni-list-item v-else class="left-list-item-unselect" :clickable="true" :transparent="true" @click="chose(index)">
						<view slot="body" class="left-list-item">
							<text class="left-list-item-text">{{ item.name }}</text>
						</view>
					</uni-list-item>
				</uni-list>
			</view>
			<!-- 右侧列表框 -->
			<view class="right" :style="aheight">
               <uni-list class="right-list" v-for="(item, index) in rightList" :key='index' :border="false">
					<uni-list-item class="right-list-items" >
						<view slot="body" class="right-list-item" >
							<text class="right-list-item-text">{{ item }}</text>
						</view>
					</uni-list-item>
				</uni-list>
			</view>
		</view>

	</view>
</template>

<script>
	//请求
	import { getList as getListApi } from '@/api/fandian/index.js'
	import { getSearch as getSearchApi } from '@/api/fandian/index.js'
	export default {
		data() {
			return {
				value: '',
				isActive: 0,
				selectIndex: '',
				cententIndex: 0,
				value: "",
				city: {},
				rlits: [1, 2, 3, 4, 5, 6],
				aheight: "height: 1400rpx",
				rightList: [],
				keywords: '11111111',
				obj2: {},
			}
		},
		watch:{
			selectIndex(nVal, oVal){}
		},
		onLoad() {
			this.dianji()
		},
		methods: {
			chose(index) {
				this.rightList = this.city[index].list;
				this.selectIndex = this.city[index].name;
			},
			async dianji(){
				let that = this;
				let indexValue = 0;
				const { status, data, msg } = await getListApi();
				
				this.city = Object.keys(data).map(index => {
					
					let item = {
						name: index,
						list: data[index]
					}

					if (indexValue === 0) {
						indexValue += 1;
						this.rightList = item.list;
						this.selectIndex = item.name;
					}
					console.log('map',item)
					return item;
				})
			},
			search(e){
				let sPlace = e.detail.value
				let params1 = {
					cmd:'returnplace',
					sPlace
				}
				let params = JSON.stringify(params1);

				getSearchApi(params).then(res => {
					var that =this
					if(JSON.stringify(res.data)==="{}"){
						this.array = []
						uni.showToast({
						    title: '查无此内容',
						    duration: 1600
						});
						setTimeout(()=>{
							uni.redirectTo({
							    url: '/pages/index/fandian/index'
							});
						}, 1700)
					}

					let indexValue = 0;

					this.city = Object.keys(res.data).map(index => {
						let item = {
							name: index,
							list: res.data[index],
						}

						if (indexValue === 0) {
							indexValue += 1;
							this.rightList = item.list;
							this.selectIndex = item.name;
						}

						return item;
					})
				})
			}
		}
	}
</script>

<style scoped>
	.content1{
		background-color: white;
		
	}
	.head {
		background-color: #ffffff;
		/* padding-top: 40rpx; */
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/* '.search1 {
		margin-left: 5%;
		width: 60%;
		text-align: center;
	}
	.search22{
		width: 50%;
	}' */
	.imgsearch{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left:220rpx ;
		top:46rpx
	}
	.headSearch{
		/* background-image: url(@/static/fandian/sousuo.png); */
		/* background-size:38rpx; */
		margin-top: 15rpx;
		height: 100rpx;
		width: 90%;
		border-radius: 3%;
		background-color: #F5F5F5;
		/* background-position: 5rpx 4rpx; */
		/* background-repeat: no-repeat; */
		/* padding: 24rpx auto; */
		text-align: center;
		/* background: #F5F5F5; */
		/* text-align: center;
		width: 700rpx;
		background: #F5F5F5;
		height: 80rpx; */
	}

	.content {
		display: flex;
		width: 100%;
		background-color: #0000FF;
		min-height: 1400rpx;
		margin-top: 20rpx;
		box-shadow: 0px 1px 4px 0px rgba(240, 240, 240, 0.8);
	}

	.left {
		width: 25%;
		background-color: #F5F5F5;
		
		/* min-height: 1400rpx; */
	}

	.right {
		width: 75%;
		background-color: #FFFFFF;
		/* min-height: 1400rpx; */
	}

	.left-list-item {
		
		width: 100%;
		flex-direction: row;
		align-items: center;
		text-align: center;

	}
	.left-list-item1{
		width: 100%;
		flex-direction: row;
		align-items: center;
		text-align: center;
	}
	
	.left-list-item-up {
		background: #F5F5F5;
		/* color: red; */
		border-radius: 0px 0px 20px 0px;
	}
	.left-list-item-down {
		background: #F5F5F5;
		border-radius: 0px 20px 0px 0px;
	}

	
	.left-list-item-unselect,
	.left-list-item-selected {
		width: 100%;
		background-color: #F5F5F5;
		flex-direction: row;
		align-items: center;
		text-align: center;
	}
	
	.left-list-item-selected,
	.left-list-item-selected .uni-list-item {
		background-color: #FFFFFF;
		
		/* color: #000000; */
	}

	.left-list-item-text {
		display: block;
		width: 100%;
		/* text-align: center; */
		color: #989898;
		/* color: #0000FF; */
		font-size: 24rpx;
		position: relative;
	}
	.left-list-item-selected .left-list-item-text{
		color: black;
	}
	
	
	.left-list-item-text::before {
		content: ''; 
		position: absolute;
		top: -10px;
		right: -10px;
		bottom: -10px;
		left: -10px;
		font-size: 30rpx;
		
		 }
	
	
	/* .left-list-item {
		width: 100%;
		
		flex-direction: row;
		align-items: left;
		text-align: left;
	} */
	
	.right-list-item-text {
		line-height: 40rpx;
		margin-left: 30rpx;
		width: 100%;
		/* text-align: center; */
		color: #474747;
		font-size: 26rpx;
	}
	.active {
	background: #ff801f;
	color: #fff;
	 }
	#default1{  
		font-size: 26rpx; 
		color: #000000;
		/* width: 100%;
		background-color: #0000FF;
		height: 60rpx; */
		
	}
	/* /deep/ .item-content{
		background-color: #000000;
		width: 800rpx;
	}
	/deep/ .right-list-items{
		background-color: #00AAFF;
		width: 800rpx;
	}
	/deep/ .sexi{
		background-color: #ff00ff;
		width: 800rpx !important;
	} */
	 
</style>
